<template>
    <div class="seller">
        <div class="seller-content">
            <div class="overview">
                <h1 class="title">{{seller.name}}</h1>
                <div class="desc border-1px">
                    <star :size="36" :score="seller.score"></star>
                    <span class="text">({{seller.ratingCount}})</span>
                    <span class="text">月售{{seller.sellCount}}单</span>
                </div>
                <ul class="remark">
                    <li class="block">
                        <h2>起送价</h2>
                        <div class="content">
                            <span class="stress">{{seller.minPrice}}</span>元
                        </div>
                    </li>
                    <li class="block">
                        <h2>商家配送</h2>
                        <div class="content">
                            <span class="stress">{{seller.deliveryPrice}}</span>元
                        </div>
                    </li>
                    <li class="block">
                        <h2>平均配送时间</h2>
                        <div class="content">
                            <span class="stress">{{seller.deliveryTime}}</span>分钟
                        </div>
                    </li>
                </ul>
                <div class="favorite" @click="toggleFavorite($event)">
                    <i class="iconfont icon-aixin" :class="{'active': favorite}"></i>
                    <span>{{favoriteText}}</span>
                </div>
            </div>
            <split></split>
            <div class="bulletin">
                <h1 class="title">公告与活动</h1>
                <div class="content-wrapper border-1px">
                    <p class="content">{{seller.bulletin}}</p>
                </div>
                <ul class="supports">
                    <li class="support-item" v-for="(item,index) in seller.supports">
                        <span class="icon" :class="classMap[seller.supports[index].type]"></span>
                        <span class="text">{{seller.supports[index].description}}</span>
                    </li>
                </ul>
            </div>
            <split></split>
            <div class="pics">
                <h1 class="title">商家实景</h1>
                <div class="pic-wrapper" ref="picWrapper">
                    <ul class="pic-list" ref="picList">
                        <li class="pic-item" v-for="pic in seller.pics">
                            <img :src="pic" width="120" height="120">
                        </li>
                    </ul>
                </div>
            </div>
            <split></split>
            <div class="info">
                <div class="title border-1px">商家信息</div>
                <ul>
                    <li class="info-item" v-for="info in seller.infos">{{info}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import star from '../star/star.vue';
import split from '../split/split.vue';
import BScroll from 'better-scroll';
import {savaToLocal, loadFromlLocal} from '../../common/js/store';

export default {
    props: {
        seller: {
            type: Object
        }
    },
    components: {
        star,
        split
    },
    data(){
        return {
            favorite: ( () => {
                return loadFromlLocal(this.seller.id, 'favorite', false)
            })()
        }
    },
    created() {
        // 商店图片的横轴滚动
      if (!this.picScroll) {
        if (this.seller.pics) {
            this.$nextTick(() => {
                let picWidth = 120
                let margin = 6
                let width = (picWidth + margin) * this.seller.pics.length - margin
                // 设置图片外层元素的宽度
                this.$refs.picList.style.width = width + 'px'
                this.picScroll = new BScroll(this.$refs.picWrapper, {
                    scrollX:true,
                    eventPassthrough: 'vertical'
                })
            })
        }
      } else {
        this.picScroll.refresh()
      }
      if (!this.scroll) {
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$el, {click: true});
        });
      } else {
        this.scroll.refresh();
      }
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    },
    computed: {
        favoriteText() {
            return this.favorite ? '已收藏' : '收藏'
        }
    },
    methods:{
        toggleFavorite(event) {
            if (!event._constructed) {
                return
            }
            this.favorite = !this.favorite
            savaToLocal(this.seller.id, 'favorite', this.favorite);
        }
    }
};

</script>

<style lang="stylus" rel="stylesheet/stylus">
@import 'seller.styl'
</style>
